import React from 'react'
import {
    ContestWrapper,
    Tab,
    TabItem,
    NoData,
    List,
    ListItem
} from './style'
import noContest from '../../assets/images/no_contest.png'
import classnames from 'classnames'

const Contest = ({data,tab,setTab}) => {
    const onSetTab=(key)=>{
        setTab(key)
    }
    return (
        // 切页面
        <ContestWrapper className={tab}>
            <h2>热门赛事</h2>
            <Tab >
                {/* {
                    data.map(item => < TabItem key={item.id}>
                        <span>{item.title}</span>
                    </TabItem>)
                } */}
                <TabItem onClick={onSetTab.bind(null,'all')} 
                    className={classnames({selected:tab =='all'})}>
                    <a href="#"><span>全部</span></a>
                </TabItem>
                <TabItem onClick={onSetTab.bind(null,'esport')}
                    className={classnames({selected:tab =='esport'})}>
                    <a href="#"><span>电竞赛事</span></a>
                </TabItem>
                <TabItem onClick={onSetTab.bind(null,'sport')}
                    className={classnames({selected:tab =='sport'})}>
                    <a href="#"><span>体育赛事</span></a>
                </TabItem>
            </Tab>
            <List>
                {
                    data.map(item=> <ListItem key={item.id}>
                        <a href="#"><span>{item.title}</span></a>
                    </ListItem> )
                } 
            </List>

            {data.length<0 && <NoData >
                <img src={noContest} alt="" />
                <p>暂无赛事， 看看更多演出</p>    
            </NoData>}
        </ContestWrapper>
    )
}

export default Contest